<template>
  <!-- 评论 -->
  <div>
    <div class="cmt_list">
      <div class="cmt_item">
        <div class="cmt_text">
          <!-- 图片 -->
          <div class="cmt_on">
            <div class="cmt_head">
              <img :src="commit_data.avatarUrl" alt="" />
            </div>
            <div class="cmt_meta">
              <span> {{ commit_data.nickname }} </span>
              <div class="cmt_timer">
                {{ commit_data.time | get_time }}
              </div>
            </div>
          </div>

          <div class="cmt_header">
            <div class="cmt_like">
              <span> {{ commit_data.likedCount }}</span>
              <span>
                <van-icon name="good-job-o" size="12" />
              </span>
            </div>
          </div>
        </div>
        <!-- 内容 -->
        <div class="content">
          <span> {{ commit_data.content }} </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    commit_data: Object,
  },
  filters: {
    get_time(time) {
      let newtime = new Date(time);
      let years = newtime.getFullYear();
      let months = newtime.getMonth() + 1;
      let days = newtime.getDate();
      let hours = newtime.getHours();
      let mins = newtime.getMinutes();

      var dateTimeStamp = new Date(time).getTime();
      var minute = 1000 * 60;
      var hour = minute * 60;
      var day = hour * 24;

      // var month = day * 30;
      // var year = month * 12;
      var now = new Date().getTime();
      var diffValue = now - dateTimeStamp;
      var result = "";
      if (diffValue < 0) {
        return;
      }
      // var monthC = diffValue / month;
      // var weekC = diffValue / (7 * day);
      var dayC = diffValue / day;
      var hourC = diffValue / hour;
      var minC = diffValue / minute;
      // var yearC = diffValue / year;
      if (dayC >= 2) {
        return years + "年" + months + "月" + days + "日";
      }
      if (dayC >= 1) {
        result =
          "昨天" +
          "" +
          hours.toString().padStart(2, "0") +
          ":" +
          mins.toString().padStart(2, "0");
      } else if (hourC >= 1) {
        result =
          "" +
          hours.toString().padStart(2, "0") +
          ":" +
          mins.toString().padStart(2, "0");
      } else if (minC >= 1) {
        result = "" + parseInt(minC) + "分钟前";
      } else {
        result = "刚刚";
      }

      return result;
      // return years + "年" + months + "月" + days + "日";
    },
  },
};
</script>

<style lang="scss" scoped>
.cmt_list {
  .cmt_item {
    padding-top: 10px;
    width: 100%;
    margin: 0 10px;
    .cmt_text {
      display: flex;
      // flex-direction: row;
      justify-content: space-between;
      .cmt_on {
        display: flex;
        .cmt_head {
          height: 35px;
          width: 30px;
          margin-right: 10px;
          img {
            width: 100%;
            border-radius: 15px;
          }
        }
        .cmt_meta {
          span {
            font-size: 14px;
            color: #666;
            line-height: 20px;
            max-width: 100%;
          }
          .cmt_timer {
            font-size: 9px;
            color: #999;
          }
        }
      }

      .cmt_header {
        padding-right: 10px;
        padding-bottom: 11px;
        display: flex;
        justify-content: space-between;

        .cmt_like {
          width: 65px;
          height: 22px;
          line-height: 22px;
          font-size: 11px;
          color: #999;
          text-align: right;

          span {
            display: inline-block;
            min-width: 18px;
          }
        }
      }
    }

    .content {
      color: #333;
      font-size: 15px;
      line-height: 22px;
      margin-top: 5px;
      margin-right: 20px;
      margin-left: 42px;
    }
  }
}
</style>
